<template>
  <div class="detail">
    <HederTop title="Order details" :borderRadius="'0'"  :backAuto="true"  @navBack='navBack'></HederTop>

    <div v-if="orderInfo && orderInfo.withdrawChannelChange != 1" class="order-info">
      <div class="info">

        <div class="amount-box">
          <div class="title">Application Amount</div>
          <div class="amount">₱ {{ orderInfo.contractAmount | formatCurrency(',') }}</div>
        </div>

        <div class="detail-pay" v-if="type === 'repay'">Pay on time and get <span>₱ {{orderInfo.contractAmount * 2 | formatCurrency(',')}}</span> in the next loan.</div>

        <div class="info-box">
          <!--          <p class="border-icon" />-->
          <div class="header" v-if="type === 'pending'">
            <div class="pend">
              <img src="~@/assets/imgs/order/order_pending.png" alt="">
              <div>Pending</div>
            </div>
          </div>
          <div class="info-title">Loan information</div>
          <div class="info-list">
            <!-- <div class="list-item">
                <div>Application quota</div><div>₱ {{orderInfo.loanAmount}}</div>
            </div> -->
            <!-- 管理费 -->
            <div class="list-item question" v-if="showInfo">
              <div class="question">
                <div>Management fee </div>
                <div class="icon" @click="() => showFeeInfo = !showFeeInfo">
                  <img src="~@/assets/imgs/icon/icon_questionMark.png" alt="">
                </div>
            </div>
            <div>PHP {{ orderInfo.managementFee }}</div>
          </div>
          <!-- 借款成功后展示 -->
          <!-- 到期时间 -->
          <div v-if="type == 'repay' && showInfo">
            <div class="list-item">
              <div>Expiry date</div>
              <div> {{ orderInfo.expireTime | formatDate('MM-dd-yyyy') }}</div>
            </div>
            <!-- 借款时间 -->
            <div class="list-item">
              <div>Loan date</div>
              <div> {{ orderInfo.loanTime | formatDate('MM-dd-yyyy') }}</div>
            </div>
            <!-- 逾期天数 -->
            <div class="list-item">
              <div>Days Overdue</div>
              <div> {{ orderInfo.lateDays }}</div>
            </div>
            <!-- 逾期期费 -->
            <div class="list-item">
              <div>Overdue fees</div>
              <div> {{ orderInfo.overDueAmount ? orderInfo.overDueAmount : 0 }}</div>
            </div>
            <div class="list-item">
              <div>Loan products</div>
              <div> {{ orderInfo.productName }}</div>
            </div>
            <div class="list-item light">
              <div>Withdrawal code</div>
              <div> {{ orderInfo.withdrawalCode }}</div>
            </div>
          </div>
          <!--  借款成功后展示 -->
          <div v-if="type == 'pending' && showInfo">
            <!--  借款成功后不展示 -->
            <div class="list-item">
              <div>Amount received</div>
              <div>PHP {{ orderInfo.loanAmount }}</div>
            </div>
            <div class="list-item">
              <div>Date of Application</div>
              <div>{{ orderInfo.loanTime | formatDate('MM-dd-yyyy') }}</div>
            </div>
            <!-- 借款周期时间 -->
            <div class="list-item">
              <div>Borrowing cycle</div>
              <div> {{ orderInfo.loanPeriod }} days</div>
            </div>
            <!-- 收集方法 -->
            <div class="list-item">
              <div>Collection method</div>
              <div> {{ orderInfo.withdrawChannelName }}</div>
            </div>
            <div class="list-item">
              <div>Loan products</div>
              <div> {{ orderInfo.productName }}</div>
            </div>
            <!--  借款成功后不展示 -->
          </div>
          <div class="open-close" @click="handleHideInfo">{{showInfo ? 'Close' : 'Expend'}}<img :src="require(`@/assets/imgs/icon-${showInfo ? 'up' : 'down'}.png`)" alt=""></div>
        </div>
      </div>
      <productListCom :orderId="orderId" :pageTrackerInfo="pageTrackerInfo" @customeAction="navBack" :disabled="!firstBack && type!='pending'" :recommend="true"/>
    </div>

    <div class="btn-box" v-if="type == 'repay'">
      <div v-if="orderInfo.delayStatus == 1" class="extensio">
        <div class="btn-ui extension_btn" @click="goExtension">Extension</div>
        <div class="btn-ui" @click="returnTo">Repayment</div>
      </div>
      <div v-else>
        <div class="btn-ui" @click="returnTo">Repayment</div>
      </div>
    </div>
  </div>
  <ChangeChannel :orderInfo="orderInfo" @changeSuccess="changeSuccess" v-else></ChangeChannel>

    <!-- 返回提示框 -->
     <!-- 提示框 -->
     <Modal class="fee-info-wrap" v-model="showDialog" @close="handleClose">
        <div class="mine-dialog pb-32">
          <p class="title pt-0">Tips</p>
          <p class="text">Please complete the repayment first and you will unlock a higher loan amount.</p>
        </div>
        <div class="tips-btn-group">
            <button class="btn-ui cancel" @click="handleClose">Exit</button>
            <button class="btn-ui" @click="handleConfirm">Continue</button>
        </div>
      </Modal>
    <manageDetail :fees="orderInfo" :titleShow="false" :coin="true" v-model="showFeeInfo"></manageDetail>
</div>
</template>
<script>
import BankData from '../../../static/bank.json';
import ChangeChannel from './components/changeChannel';
import HederTop from '@/components/header-top'
import productListCom from '@/views/product/productList/components/productListCom'
import Modal from '@/components/Modal'
import manageDetail from '@/views/addOrder/components/manageDetail'
export default {
  components: {
    ChangeChannel,
    HederTop,
    productListCom,
    Modal,
    manageDetail
  },
  data() {
    return {
      showFeeInfo:false,
      orderId: '',
      status: '',
      bankData: BankData.bank, // 取款银行数据
      firstBack: false,
      showDialog: false,
      showInfo: false,
      orderInfo: {
        // orderNo:0,
        // status:'',
        // contractAmount:"2000",//合同金额
        // managementFee:'1000',//管理费 = 账户管理费 + 平台服务费 + 风险管理费 + 征信费用
        // loanAmount:'1000',//到账金额
        // loanTime:'1111',//借款申请时间
        // loanFinishTime:'1111',//放款成功时间
        // expireTime:'1233',//逾期时间
        // lateDays:'2',//逾期天数
        // overDueAmount:'222',//逾期金额
        // productId:'1',//借款产品ID
        // productName:'dsadaa',//借款产品
        // channelName:'name',//收款方式
        // withdrawChannelChange:1//是否需要变更银行卡 0:不需要变更 1:需要变更
      },
      pageTrackerInfo: {
        page: 'billDetail',
        startTime: new Date().getTime()
      }
    }
  },
  methods: {
    handleHideInfo () {
      this.showInfo = !this.showInfo
      if (this.showInfo) {
        // 账单详情页展开点击
        this.$buryPoint.action({
          eventName: 'billDetail_expand_click',
          eventValue: {
            orderId: this.orderId || ''
          },
          ...this.pageTrackerInfo
        })
      }
    },
    handleConfirm () { // 弹窗确认
        this.showDialog = false
        // 账单详情页继续点击
        this.$buryPoint.action({
          eventName: 'billDetail_repayPopup_yes_click',
          eventValue: {
            orderId: this.orderId || ''
          },
          ...this.pageTrackerInfo
        })
        // this.returnTo()
        this.$router.push({ path: '/repay', query: { productId: this.orderInfo.productId, orderId: this.orderId } })
        this.$hybrid.action("isBackClick", {
          appBack: true
        });
      },
      handleClose () { // 弹窗关闭
        this.showDialog = false
        // 账单详情页退出点击
        this.$buryPoint.action({
          eventName: 'billDetail_repayPopup_no_click',
          eventValue: {
            orderId: this.orderId || ''
          },
          ...this.pageTrackerInfo
        })
      },
    navBack () {
        this.$hybrid.action("isBackClick", {
          appBack: true
        });
        // app可以 h5会出现刷新问题  
        if (this.firstBack || this.type === 'pending') { // 不走弹窗直接退出
          this.firstBack = false
          this.showDialog = false
          this.$router.go(-1)
          return
        }
        // 弹窗开启  
        // 账单详情页还款提示弹窗曝光
        this.$buryPoint.action({
          eventName: 'billDetail_repayPopup_show',
          eventValue: {
            orderId: this.orderId || ''
          },
          ...this.pageTrackerInfo
        })
        this.showDialog = true
        this.firstBack = true
      },

    goExtension() {
      // 账单详情页展期点击
      this.$buryPoint.action({
        eventName: 'billDetail_extension_click',
        eventValue: {
          orderId: this.orderId || ''
        },
        ...this.pageTrackerInfo
      })
    // const isOverdue = this.previewData.isOverdue;
      this.$router.push({
        path: '/extension/apply',
        query: { productId: this.orderInfo.productId, orderId: this.orderId }
      });
      this.$hybrid.action("isBackClick", {
        appBack: true
      });
    },
    returnTo() {
      // 账单详情页还款点击
      this.$buryPoint.action({
        eventName: 'billDetail_repayment_click',
        eventValue: {
          orderId: this.orderId || ''
        },
        ...this.pageTrackerInfo
      })
      this.$router.push({ path: '/repay', query: { productId: this.orderInfo.productId, orderId: this.orderId } })
      this.$hybrid.action("isBackClick", {
          appBack: true
        });
    },

    changeSuccess() {
      this.getOrderInfo()
    },
    getOrderInfo() {
      let params = {
        orderNo: this.orderId
      };
      let { phone } = this.$storage.get('user');
      if (phone == '09453678670') {
        this.orderInfo = {
          appName: "MoreGold",
          appPackage: "com.thrift.more",
          appVersion: "1.0.0",
          company: "Funpera",
          contractAmount: 3500,
          domain: "Funpera",
          lateDays: 0,
          loanAmount: 3300,
          loanPeriod: 180,
          loanTime: 1694672557882,
          managementFee: 200,
          offset: 0,
          orderNo: "782732221373136896",
          productId: 221017003,
          productName: "VIP1",
          source: "",
          status: 1,
          withdrawAccount: "09053005108",
          withdrawChannelChange: 0,
          withdrawChannelName: "Gcash",
        }
      } else {
        this.$api.orderInfo(params).then(res => {
          let { status, error, data } = res;
          if (status == 1 && error == '00000000') {
            this.orderInfo = data;
            this.status = data.status.toString()
          }
        })
      }
    },
    appBack() {
        // const hybrid = new Hybrid(this.$os.android ? "android" : "ios")
        // 安卓单击退出返回
        this.$hybrid.action("isBackClick", {
          appBack: false,
          callback: (data) => {
            console.log(data)
            console.warn("我被单击啦~~~~~~~~~~~~~~");
            this.navBack()
          },
        });
      },
  },
  created() {
    let { orderId, type } = this.$route.query;
    this.type = type;
    this.orderId = orderId
    this.getOrderInfo()
    const appVersion = this.$storage.get('appVersion')
    if (appVersion >= '1.0.5') {
      this.appBack()
    }
  },
  beforeDestroy () {
    this.pageEndAction()
    this.$hybrid.action("isBackClick", {
      appBack: true
    });
  },
  mounted () {
    this.pageStartAction()
    // 账单详情页页面曝光
    this.$buryPoint.action({
      eventName: 'billDetail_page_show',
      eventValue: {
        orderId: this.orderId || ''
      },
      ...this.pageTrackerInfo
    })
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
